<template>
  <div>
    <div class="group1">  
      <div style="width: 100%;height: 40px;text-align: center;">
        <br>
        <span style="font-size: 30px;">数据总览</span>
      </div>
        
      <el-row :gutter="18" type="flex" justify="center" align="middle">
        <el-col :span="3" v-for="(value,key) in totalResult" :key="key" >
        <div style="text-align: center;height: 90px;">
          <br>
          <span style="font-size: 15px;">{{key}}</span>
          <br>
          <br>
          <span style="font-size: 25px;">{{value}}</span>
          <br>
        </div>
      </el-col>
      </el-row>
    </div>
    
    <div class="group1">
      <el-card class="box-card-sale">
        <ECharts :options="order" autoresize style="width: 100%;"></ECharts>
        <el-radio-group v-model="days" @change="orderTotal">
          <el-radio :label="7">近七日</el-radio>
          <el-radio :label="15">近十五日</el-radio>
        </el-radio-group>
      </el-card>
      <el-card class="box-card-sale">
        <ECharts :options="goodsType" autoresize style="width: 100%;"></ECharts>
        <br>
      </el-card>
    </div>

    <div class="group1">
      
      <el-card class="box-card-sale">
        <ECharts :options="userRole" autoresize style="width: 100%;"></ECharts>
        <br>
      </el-card>
    </div>

    <div class="group1">
      
      <el-card v-for="(item,index) in storeUsageList" :key="index" class="box-card-sale" >
        <ECharts  :options="item"  autoresize style="width: 100%;"></ECharts>
      </el-card>
    </div>
  </div>
</template>

<script src="./home.js">

</script>

<style>
.box-card-sale {
  width: 45%;
  margin: 10px 1%;
  display: inline-block;
}

.group1 {
  width: 96%;
  margin: 0 2%;
}
</style>